/* CSS */

body {
	font-family: Arial, sans-serif;
	font-size: 100%;
	background: url('screens/container_bg.png');
}

#eye {
	width: 100%;
	padding-bottom: 1px;
	border-bottom: 1px solid #c1c1c1;
}

#eye .eye_contents {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
}

#eye .left {
	width: 40%;
	float: left;
}

#eye .left p {
	width: 85%;
	margin: 10px 0 0 15%;
}

#eye .right {
	width: 55%;
	margin: 10px 3% 10px 0;
	float: right;
	line-height: 32px;
}

#eye .right .text1 {
	font-size: 26px;
}

#eye .right .text2 {
	margin-top: 10px;
	font-size: 1.0em;
	line-height: 140%;
}

#eye:after {
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
	content: "";
}

#eye .right.cl { color: #67B2D9; }
#eye .right.dl { color: #52BA97; }
#eye .right.dummy { color: #754CC6; }


/* ==========================================================================
   max-width:800px
   ========================================================================== */

@media only screen and (max-width:800px){

    #eye .right {
	line-height: 30px;
}

    #eye .right .text1 {
	font-size: 24px;
	}


/* ==========================================================================
   max-width:480px
   ========================================================================== */

@media only screen and (max-width:480px){

    #eye {
	width: 100%;
	}
	
    #eye .left {
	width: 40%;
	float: left;
	}

    #eye .left p {
	width: 100%;
	margin: 10px 0 0 8%;
	}

    #eye .right {
	width: 56%;
	float: right;
	line-height: 25px;
	}

    #eye .right .text1 {
	font-size: 20px;
	font-weight: bold;
	}

	#eye .right .text2 {
	margin-top: 7px;
	font-size: 0.9em;
	}

}